<template>
  <div class="filter-container">
    <el-collapse-transition>
      <div v-if="showHelp" class="help">
        <div class="transition-box">
          <p>使用方法(请换成对应域名):</p>
          <p>
            <span class="title">1. 设置与开发 => 公众号设置 => 功能设置</span>
            <br />
            <br />
            下载 MP_xxxx.txt文件到h5根目录 (以及api根目录)
            <br />
            <span class="text">业务域名 + JS接口安全域名 + 网页授权域名 => www.xxx.com</span>
          </p>
          <p>
            <span class="title">2. 设置与开发 => 基本配置</span>
            <br />
            <br />
            开发者密码 + ip白名单 (需要管理员再次扫码)
            <br/>
            服务器配置:
            <br />
            <span class="text">设置 EncodingASEKey + Token (这个必须填)</span>
            <br />
            <span class="text">连接地址: http://api.域名.com/wx/connection/index</span>
          </p>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  name: 'WxHelp',
  props: {
    showHelp: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped lang="scss">
.help {
  .transition-box {
    //height: 100px;
    border-radius: 4px;
    background-color: #f5f7fa;
    border: 1px solid #dfe6ec;
    color: #909399;
    padding: 10px 15px;
    box-sizing: border-box;
    text-align: left;
    span.title {
      color: red;
    }
    span.text {
      padding-left: 50px;
    }
  }
}
</style>
